<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border: 1px solid lightgray;
            align-items: center;
        }
        
        li img {
            width: 100px;
        }
    </style>
</head>

<body>
    <!-- 
        注意:
(1)Getter不应有副作用
计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，不要在getter 中做异步请求或者更改 DOM!
(2)避免直接修改计算属性值
从计算属性返回的值是派生状态。可以把它看作是一个“临时快照"，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改-应该更新它所依赖的源状态以触发新的计算。
     -->
    <div id="app">
        <ul>
            <li>
                <div>
                    <input type="checkbox" v-model="isAllChecked" @change="handleChange">
                    <span>全选/全不选</span>
                </div>
            </li>
            <template v-if="datalist.length">
            <li v-for="(data,index) in datalist" :key="data.id">
        <div>
            <input type="checkbox" v-model="checkList" :value="data" @change="handleItemChange">
        </div>
        <div>
           <img :src="data.poster" alt="">
        </div>
        <div>
          <div>{{data.title}}</div>
          <div style="color:red">{{data.price}}</div>
        </div>
        <div>
           <button @click="data.number--" :disabled="data.number===1">-</button>
  {{data.number}}
           <button @click="data.number++" :disabled="data.number===data.limit">+</button>
        </div>
<div>
  <button @click="handleDel(index,data.id)">delete</button>

</div>
</li>
</template>
            <li v-else>购物车空空如也</li>
            <li>
                <!-- <div>总金额：{{sum()}}</div> -->
                <!-- sum改成计算属性 -->
                <div>总金额：{{sum}}</div>
            </li>
        </ul>
        {{checkList}}
    </div>

    <script>
        var obj = {
            data() {
                return {
                    isAllChecked: false,
                    checkList: [],
                    datalist: [{
                        id: 1,
                        title: '商品1',
                        price: 1000,
                        number: 1,
                        poster: './images/1.jpg',
                        // poster: 'https://img.ixintu.com/upload/jpg/20210523/a41899f8dc99e2014959c6874516ebb2_115416_800_929.jpg%21con',
                        limit: 5
                    }, {
                        id: 2,
                        title: '商品2',
                        price: 2000,
                        number: 1,
                        poster: './images/2.webp',
                        // poster: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi1%2F770282689%2FO1CN01rLij9U1VjbhMpL4Jb_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708440226&t=3636ba4c0f3b4b19f47183e96f9a839b',
                        limit: 3
                    }]
                }
            },
            methods: {
                // sum() {
                //     return this.checkList.reduce((total, item) => total + item.price * item.number, 0)
                // },
                handleDel(index, id) {
                    this.datalist.splice(index, 1)
                    this.checkList = this.checkList.filter(item => item.id !== id)
                    this.handleItemChange()

                },
                handleChange() {
                    this.checkList = this.isAllChecked ? this.datalist : []

                },
                handleItemChange() {
                    if (this.datalist.length === 0) {
                        this.isAllChecked = false
                        return
                    }
                    this.isAllChecked = this.checkList.length === this.datalist.length
                }
            },
            computed: {
                isAllChecked: {
                    get() {
                        return this.checkList.length === this.datalist.length
                    },
                    set(checked) {
                        this.checkList = checked ? this.datalist : []
                    }
                },
                sum: {
                    get() {
                        return this.checkList.reduce((total, item) => total + item.price * item.number, 0)
                    }
                }
            }
        }
        var app = Vue.createApp(obj).mount('#app')
    </script>
</body>

</html>